<template>
    <div class="curdataPage clearfix">
      <div class="secondary-toolbar clearfix">
        <!-- <p>
          <i class="item-symbol"></i>
          <span>当前联网率：96%</span>
          <span>在线：96</span>
          <span>申请停运：2</span>
          <span>异常掉线：3</span>
        </p>&emsp;&emsp; -->
        <div class="layoutBox" style="width:242px">
            <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
        </div>&emsp;&emsp; <el-button @click="searchData"><i class="iconfont icon-sousuo"></i>查询</el-button>
        <!-- <a href="javascript:;" class="link-btn">数据标识 >></a> -->
      </div>
      <div class="currency-mode-wrap revision-table" style="height: calc(100% - 120px);">
        <!--  :span-method="objectSpanMethod" -->
        <el-table
          :data="tableData"
          border
          height="100%"
           v-loading="loading"
           element-loading-text="加载中"
           element-loading-spinner="loading-type-a"
           element-loading-background="rgba(255, 255, 255, 1)"
          >
          <el-table-column
            type="index"
            label="序号"
            fixed
            width="50">
          </el-table-column>
          <el-table-column
            prop="cityName"
            width="120"
            fixed
            label="城市">
          </el-table-column>
          <el-table-column
            prop="areaName"
            width="140"
            fixed
            label="区县">
          </el-table-column>
          <el-table-column
            prop="stationName"
            width="160"
            fixed
            :label="tableStationLabel">
          </el-table-column>
          <el-table-column
            prop="stationState"
            width="50"
            fixed
            label="状态">
            <template slot-scope="scope">
               <span title="正常" v-if="parseInt(scope.row.stationState) === 0">正常</span>
                <span title="超标" v-else>超标</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="dataTime"
            width="170"
            fixed
            label="监测时间">
          </el-table-column>
          <el-table-column
            v-if="!siteType"
            prop="waterQuality"
            fixed
            label="水质类别">
            <template slot-scope="scope">
              <span v-if = " parseInt(scope.row.waterQuality) === 1 "><i class="category-icon categoryA"></i> Ⅰ</span>
              <span v-if = " parseInt(scope.row.waterQuality) === 2 "><i class="category-icon categoryA"></i> Ⅱ</span>
              <span v-if = " parseInt(scope.row.waterQuality) === 3 "><i class="category-icon categoryB"></i> Ⅲ</span>
              <span v-if = " parseInt(scope.row.waterQuality) === 4 "><i class="category-icon categoryC"></i> Ⅳ</span>
              <span v-if = " parseInt(scope.row.waterQuality) === 5 "><i class="category-icon categoryD"></i> Ⅴ</span>
              <span v-if = " parseInt(scope.row.waterQuality) === 6 "> <i class="category-icon categoryE"></i> 劣Ⅴ</span>
            </template>
          </el-table-column>
          <el-table-column v-for="(item,index) in tableHeader" :key="index" :label="item.label">
            <el-table-column
              width="120px"
              :prop="item.prop"
              :label="item.company">
            </el-table-column>
          </el-table-column>
          <!--<el-table-column label="pH">
            <el-table-column
              prop="w01001"
              label="无量纲">
            </el-table-column>
          </el-table-column>
          <el-table-column v-if="!siteType" label="溶解氧">
            <el-table-column
              prop="w01009"
              label="mg/l">
            </el-table-column>
          </el-table-column>
          <el-table-column v-if="!siteType" label="电导率">
            <el-table-column
              prop="w01014"
              label="μS/cm">
            </el-table-column>
          </el-table-column>
          <el-table-column v-if="!siteType" label="浊度">
            <el-table-column
              prop="w01003"
              label="NTU">
            </el-table-column>
          </el-table-column>
          <el-table-column v-if="!siteType" label="高锰酸盐">
            <el-table-column
              prop="w01019"
              width="120"
              label="mg/l">
            </el-table-column>
          </el-table-column>
          <el-table-column v-if="siteType" label="CODcr">
            <el-table-column
              prop="w01018"
              width="120"
              label="mg/l">
            </el-table-column>
          </el-table-column>
          <el-table-column label="氨氮">
            <el-table-column
              prop="w21003"
              label="mg/l">
            </el-table-column>
          </el-table-column>
          <el-table-column label="总磷">
            <el-table-column
              prop="w21011"
              label="mg/l">
            </el-table-column>
          </el-table-column>
          <el-table-column label="总氮">
            <el-table-column
              prop="w21001"
              label="mg/l">
            </el-table-column>
          </el-table-column>-->
        </el-table>
      </div>
      <div class="paginationBox">
        <el-pagination
          @size-change="paginationSizeChange"
          @current-change="paginationChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          background
          :small = "true"
          popper-class = "select-common-option"
          :page-sizes = "pageList"
          layout="total,sizes,slot,->,prev, pager, next, jumper"
          :total="totalRecords">
          <span class="el-pagination__current">当前第{{currentPage}}/{{totalPage}}页</span>
        </el-pagination>
      </div>
      <div class="tips-text">
        <p>
          <i class="el-icon-warning"></i>
          <span> 提示：水质类别参评项为：pH、溶解氧、高猛酸钾指数、氨氮、总磷；数据未经审核仅供参考。</span>
        </p>
      </div>
    </div>
</template>

<script>
export default {
  name: "currentData",
  components:{},
  data() {
    return {
      tableStationLabel:'',
      tableData:[],
      stationId:'',
      dateRange:[],
      currentPage: 1, //分页组件当前页
      pageSize: 10, //分页每页多少条数据
      totalRecords: 0, //总条数
      pageList: [10, 15, 20], //设置每页多少条
      siteType:false,
      tableHeader:[],
      tableHeaderA:[
        {
          prop:'w01019',
          label:'高锰酸盐',
          company:'mg/l'
        },{
          prop:'w21003',
          label:'氨氮',
          company:'mg/l'
        },{
          prop:'w21011',
          label:'总磷',
          company:'mg/l'
        },{
          prop:'w21001',
          label:'总氮',
          company:'mg/l'
        },{
          prop:'w01010',
          label:'水温',
          company:'℃'
        },
        {
          prop:'w01001',
          label:'pH(≤±0.10)',
          company:'无量纲'
        },
        {
          prop:'w01009',
          label:'溶解氧(≤±10%)',
          company:'mg/l'
        },{
          prop:'w01014',
          label:'电导率(≤±5%)',
          company:'μS/cm'
        },{
          prop:'w01003',
          label:'浊度(≤±10%)',
          company:'NTU'
        },
        {
          prop:'w01016',
          label:'叶绿素',
          company:'μg/l'
        }
      ],
      tableHeaderB:[
        {
          prop:'w01018',
          label:'CODcr',
          company:'mg/l'
        },
        {
          prop:'w01001',
          label:'pH(≤±0.10)',
          company:'无量纲'
        },
        {
          prop:'w21003',
          label:'氨氮',
          company:'mg/l'
        },{
          prop:'w21011',
          label:'总磷',
          company:'mg/l'
        },{
          prop:'w21001',
          label:'总氮',
          company:'mg/l'
        }
      ],
      loading:true,
    };
  },
  methods:{
    adda(inedx,prop,key){
      let name = this.tableData[inedx][prop];
      let row = 0;
      for(let i=inedx;i<this.tableData.length;i++){
        if(name === this.tableData[i][prop]){
          row++
        }else{
          break;
        }
      }
      this.tableData[inedx][key] = row;
      return row
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        if(row.sf){
          return{
            colspan:1,
            rowspan:row.sf
          }
        }else{
          return{
            colspan:1,
            rowspan:0
          }
        }
      }
    },
    //获取实时数据
    searchData(){
      this.loading=true;
      this.$http
        .get("/Receiving/queryRowToColRealTimeData1", {
          params: {
             mn: this.stationId, //this.stationId
             beginTime: this.dateRange[0] +' 00:00:00',
             endTime: this.dateRange[1]+' 23:59:59',
            //indexCodes: this.value.join(","),
            
            pageNum: this.currentPage,
            pageSize: this.pageSize,
          }
        })
        .then(res => {
          if (res.data.code === 0) {
            this.tableData = res.data.content.dataList;
            this.totalRecords = res.data.content.totalRecords;
             this.loading=false;
          }
        })
        .catch(error => {});
    },
    //分页页码改变时执行
    paginationChange(val) {
      this.currentPage = val;
      this.searchData();
    },
    //分页pageSize改变时执行
    paginationSizeChange(val) {
      this.pageSize = val;
      this.searchData();
    },
  },
  created() {
  
     let d = new Date().setDate(new Date().getDate() - 1);
      let date = new Date(d).format("yyyy-MM-dd");
      this.dateRange = [date, date];
    for(let i=0;i<this.tableData.length;i++){
      let num = this.adda(i,'province','sf');
      i+=num-1
    }
  },
  mounted() {

  },
  computed:{
    totalPage() {
      //计算总页数
      let number = 0;
      number = Math.ceil(this.totalRecords / this.pageSize);
      return number === 0 ? 1 : number;
    },
    stationInfo:{
      get: function () {
        return this.$store.state.stationInfo;
      },
    }
  },
  watch:{
    stationInfo(value) {
      if (value.length > 0) {
        let arr = [];
        // for(let i=0;i<value.length;i++){
        //   arr.push(value[i].nodeId);
        // }
        // this.stationId = arr.join(',');
        this.stationId = value[0].nodeId;
        if(value[0].stationType1 === '001'){
          this.siteType = false;
          this.tableHeader = this.tableHeaderA;
           this.tableStationLabel='断面名称';
        }else if(value[0].stationType1 === '002'){
          this.siteType = true;
          this.tableHeader = this.tableHeaderB;
           this.tableStationLabel='排污口名称';
        }
        this.searchData();
      }
    }
  },
};
</script>

<style scoped lang="less">
.curdataPage {
  height: 100%;
  .secondary-toolbar{
    p{
      float: left;
      height: 30px;
      line-height: 30px;
      span{
        margin-right: 20px;
      }
    }
  }
  .link-btn{
    float: right;
  }
}
  .item-symbol{
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #0066cc;
    transform: rotate(45deg);
    margin-right: 6px;
  }
  .item-symbol:before{
    content:'';
    display: block;
    width: 6px;
    height: 6px;
    margin: 1px;
    background: #0066cc;
  }
  .normal-state,.drop-line,.abnormal-state{
    display: inline-block;
    width: 20px;
    height: 17px;
    vertical-align: middle;
    margin-bottom: 2px;
  }
  .normal-state{
    background: url("../../assets/images/acquisition/normal-state.png") no-repeat center center;
  }
  .drop-line{
    background: url("../../assets/images/acquisition/drop-line-state.png") no-repeat center center;
  }
  .abnormal-state{
    background: url("../../assets/images/acquisition/abnormal-state.png") no-repeat center center;
  }
  //水质等级样式
  .category-icon{
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 2px;
    width: 10px;
    height: 11px;
  }
  .categoryA{
    background: url("../../assets/images/acquisition/shui_a_pic.png") no-repeat center center;
  }
  .categoryB{
    background: url("../../assets/images/acquisition/shui_b_pic.png") no-repeat center center;
  }
  .categoryC{
    background: url("../../assets/images/acquisition/shui_c_pic.png") no-repeat center center;
  }
  .categoryD{
    background: url("../../assets/images/acquisition/shui_d_pic.png") no-repeat center center;
  }
  .categoryE{
    background: url("../../assets/images/acquisition/shui_e_pic.png") no-repeat center center;
  }
  .tips-text{
    color: #666666;
    padding-left: 10px;
    line-height: 30px;
    border: 1px solid #d6e3f2;
    border-top: none;
  }
  .el-icon-warning{
    color: #166bce;
  }
</style>
